import React, { memo, useEffect, useState } from 'react'
import Right from './style'
import IconMenu from '@/assets/svg/icon_menu'
import IconAvatar from '@/assets/svg/icon_avatar'
import IconGlobal from '@/assets/svg/icon_global'
const index = memo(() => {
  const [listState,changListState] = useState(false);

  const rightClick = ()=>{
    changListState(true);
  }
  useEffect(()=>{
    // 隐藏面板
    const closeList = ()=>{
      changListState(false)
    }
    // 组件生成的时候，开始监听window点击，以捕获模式，从window到right
    // 可以防止默认冒泡在点击right的时候显示后立马被window隐藏的情况发生
    window.addEventListener('click',closeList,true)
    return ()=>{
      // 组件销毁的时候取消监听
      window.removeEventListener('click',closeList,true)
    }
  },[])
  return (
  <Right>
    <div className="left">
      <span>登录</span>
      <span>注册</span>
      <IconGlobal/>
    </div>
    <div className="right" onClick={rightClick}>
      <IconMenu/>
      <div className='shadow'>
      <IconAvatar/>
      </div>
      {
        listState && (
          <ul className="list">
        <li>注册</li>
        <li>登录</li>
        <li>出租房源</li>
        <li>开展体验</li>
        <li>帮助</li>
      </ul>
        )
      }
    </div>
  </Right>
  )
})

export default index